import React from 'react';
import { TouchableOpacity } from 'react-native';
import { Flex } from 'antd-mobile-rn';
import Icon from 'react-native-vector-icons/icomoon';
import { createStyles } from '../../../utils/view';
import CText from '../../../components/CText';
import { Rem } from '../../../utils/view';

const MenuItem = ({ icon, color, name, extral }) => (
  <Flex style={styles.wrapper} direction="row" justify="between">
    <Flex>
      <Icon name={icon} style={{ color: color, fontSize: Rem(44), marginRight: Rem(20) }} />
      <CText size="30" >{name}</CText>
    </Flex>
    {extral}
  </Flex>
);

let styles = {
  wrapper: {
    height: 88,
    paddingHorizontal: 24,
    borderBottomWidth: 1,
    borderColor: '#F8F1A1',
  },
};

styles = createStyles(styles);

export default MenuItem;